<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">

  <script type="text/javascript" src="./vue.js"></script>
</head>

<body>
  <div id="box">

    <!-- 表单数据双向绑定的懒加载：只有用户按下回车或转移焦点才将用户的输入与数据绑定 -->
    <input type="text" v-model.lazy="mytext" />
    {{mytext}}
    <br>

    <!-- 帮你把输入parseFloat，鸟用没有 请设置type为number即可 -->
    <input type="number" v-model="mynumber" />
    {{mynumber}}
    <br>

    <!-- 自动去头尾空格 -->
    <input type="text" v-model.trim="myusername" />
    |{{myusername}}|
    <br>

  </div>

  <script type="text/javascript">
    new Vue({
      el: "#box",
      data: {
        mytext: "",
        mynumber: 0,
        myusername: ""
      }
    })
  </script>
</body>

</html>